<template>
	<div class="setting-base">
		<div class="setting-title">
			<p>商品</p>
			<div></div>
		</div>
		<div class="setting-form">
			<el-form :model="form">
				<h4>添加商品</h4>
				<div class="goods-list">
					<div v-if="form.goodsList" class="goods-item" v-for="(item, index) in form.goodsList" :key="index"
						@mouseover="selectedIndex = index" @mouseleave="selectedIndex = -1">
						<i v-if="selectedIndex == index" class="iconfont icon-shanchu goods-icon"
							@click="deleteGoods(index)"></i>
						<el-image style="width: 60px; height: 60px" :src="item.spuUrls[0]"></el-image>
					</div>
					<div class="goods-item">
						<div class="choose-goods">
							<div @click="chooseGoods">
								<el-icon :size="20">
									<ele-Plus />
								</el-icon>
							</div>
						</div>
					</div>
				</div>
				<el-form-item label="列表样式">
					<el-radio-group v-model="form.showType">
						<el-radio label="1">大图模式 </el-radio>
						<el-radio label="2">一行两个</el-radio>
						<el-radio label="3">一行三个</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="商品倒角">
					<el-radio-group v-model="form.cornerStyle">
						<el-radio label="1">直角</el-radio>
						<el-radio label="2">圆角</el-radio>
					</el-radio-group>
				</el-form-item>

				<el-form-item label="文本样式">
					<el-radio-group v-model="form.textStyle">
						<el-radio label="0">常规体 </el-radio>
						<el-radio label="1">加粗体</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="页面边距">
					<el-slider v-model="form.styleMargin" show-input :show-input-controls="false" :min="0" :max="30" />
				</el-form-item>
				<el-form-item label="商品边距">
					<el-slider v-model="form.stylePadding" show-input :show-input-controls="false" :min="0" :max="30" />
				</el-form-item>
				<el-form-item label="商品描述">
					<el-switch v-model="form.showDesc" active-text="显示" inactive-text="不显示" />
				</el-form-item>
				<el-form-item label="购买按钮">
					<el-switch v-model="form.showBuyBtn" active-text="显示" inactive-text="不显示" />
				</el-form-item>
				<el-form-item>
					<el-radio-group v-model="form.buyBtnStyle" v-if="form.showBuyBtn">
						<el-radio label="1">样式一 </el-radio>
						<el-radio label="2">样式二</el-radio>
						<el-radio label="3">样式三</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item v-if="form.showBuyBtn && form.buyBtnStyle === '3'">
					<el-input v-model="form.buyBtnText" />
				</el-form-item>
			</el-form>
		</div>
		<selectGoods ref="selectGoodsRef" :limitNum="10" @currentRow="spuCurrent"></selectGoods>
	</div>
</template>

<script lang="ts">
import { reactive, defineComponent, defineAsyncComponent, toRefs, watch, onMounted, ref } from 'vue';
import { storeToRefs } from 'pinia';
import { diypage } from '/@/stores/diyPage';
import { ElMessageBox } from 'element-plus';
interface stateForm {
	form: any
}
export default defineComponent({
	components: {
		linkPage: defineAsyncComponent(() => import('./linkPage.vue')),
		selectGoods: defineAsyncComponent(() => import('/@/components/selectGoods/index.vue')),
	},
	props: {
		formData: {
			type: Object,
			defult: {},
		},
	},
	setup(props) {
		// 定义变量内容
		const storesDiypage = diypage();
		const { diyPageData } = storeToRefs(storesDiypage);
		//选中索引
		const selectedIndex = ref()

		// do not use same name with ref
		const state = reactive<stateForm>({
			form: {
				cornerStyle: '1',
				textStyle: '1',
				showType: '1',
				showDesc: false,
				styleMargin: 0,
				stylePadding: 0,
				showBuyBtn: true,
				buyBtnStyle: '1',
				buyBtnText: '购买',
				goodsList: [],
			},
		});
		const selectGoodsRef = ref();
		const onSubmit = () => {
			console.log('submit!');
		};
		// 页面加载时
		onMounted(() => {
			if (JSON.stringify(props.formData) == '{}') {
				state.form = {
					cornerStyle: '1',
					textStyle: '1',
					showType: '1',
					showDesc: false,
					styleMargin: 0,
					stylePadding: 0,
					showBuyBtn: true,
					buyBtnStyle: '1',
					buyBtnText: '购买',
					goodsList: [],
				};
			} else {
				state.form = props.formData;
			}
			if (diyPageData.value.selectedIndex != undefined) {
				diyPageData.value.componentsList[diyPageData.value.selectedIndex].data = state.form;
			}
		});

		watch(
			() => props.formData,
			(newValue, oldValue) => {
				state.form = newValue ? newValue : state.form;
				// 注意：`newValue` 此处和 `oldValue` 是相等的
				// *除非* state.someObject 被整个替换了
			},
			{ deep: true, immediate: true }
		);
		const spuCurrent = (goodsList: any) => {
			console.log(JSON.stringify(goodsList));
			state.form.goodsList = [...state.form.goodsList, ...goodsList];
		};
		const chooseGoods = () => {
			selectGoodsRef.value.dialog = true;
		};
		const deleteGoods = (index: number) => {

			ElMessageBox.confirm("确定删除吗？", '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			}).then(() => {
				state.form.goodsList.splice(index, 1);
			});
		}

		return {
			selectedIndex,
			selectGoodsRef,
			deleteGoods,
			spuCurrent,
			chooseGoods,
			...toRefs(state),
		};
	},
});
</script>
<style scoped lang="scss">
@import './common.scss';


.choose-goods {
	position: relative;
	width: 60px;
	height: 60px;
	line-height: 60px;
	text-align: center;

	&:hover {
		cursor: pointer;
	}
}

.goods-list {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;

}

.goods-item {
	position: relative;
	border: 1px solid #eee;
	width: 60px;
	height: 60px;
	line-height: 60px;
	text-align: center;
	margin: 10px;
	cursor: pointer;
}

.goods-icon {
	font-size: 30px;
	z-index: 1;
	position: absolute;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	right: -10px;
	top: -28px;
	color: #999999;
}
</style>
